<template>
    <div class="bc-container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/DueDiligence' }">企业尽职调查</el-breadcrumb-item>
            <el-breadcrumb-item class="bc-item">选择报告类型</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="ddrt-container">
        <div class="ddrt-header">
            <h3>选择报告类型</h3>
            <p>多维度数据分析全面评估企业风险与价值</p>
        </div>
        <div class="ddrt-list">
            <div class="item" v-for="(item, index) in reportTypeData" :key="index" @click="onCheck(item.id,'example')">
                <div class="img">
                    <img :src="item.icon" alt="">
                </div>
                <div class="desc">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.desc }}</p>
                    <div class="btns">
                        <el-button @click="onCheck(item.id,'example')">查看样例</el-button>
                        <el-button @click.stop="onCheck(item.id,'preview')" type="primary">报告预览</el-button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from "vue"
import { useRouter } from "vue-router"
import l1 from "../../assets/images/DueDiligence/l1.png"
import l2 from "../../assets/images/DueDiligence/l2.png"
import l3 from "../../assets/images/DueDiligence/l3.png"
import l4 from "../../assets/images/DueDiligence/l4.png"

const router = useRouter()

const onCheck = (id,type) => {
    router.push(`/DDReportCheck/${id}/${type}`)
}

const reportTypeData = [
    {
        id: 1,
        title: "招商准入分析报告",
        desc: "企业无感调查，根据企业工商注册、股权投资、 司法涉诉、知识产权、社保招聘等信息，对企 业进行准入分析",
        icon: l1
    },
    {
        id: 2,
        title: "企业财务分析报告",
        desc: "企业无感调查，根据企业资产负债、所有者权 益、收入、利润、纳税等信息，全面深入了解 企业经营状况",
        icon: l2
    },
    {
        id: 3,
        title: "企业用电分析报告",
        desc: "企业授权调查，根据企业的用电电费、电量、 用电行为等信息，进行企业的经营情况分析， 适用于有独立电表的直供电企业",
        icon: l3
    },
    {
        id: 4,
        title: "企业供应链分析报告",
        desc: "企业授权调查，综合企业的上游供应商、下游 客户、采购及销售商品交易等信息，多维度了 解企业供应链上下游情况",
        icon: l4
    }
]

</script>
<style lang="less" scoped>
.ddrt-container {
    background: #fff;
    padding: 40px 50px;
    padding-bottom: 60px;
    height: calc(100vh - 170px);

    .ddrt-header {
        h3 {
            font-size: 25px;
            color: #373737;
        }

        p {
            font-size: 16px;
            color: #000000;
            margin-top: 10px;
        }
    }

    .ddrt-list {
        overflow: hidden;
        clear: both;
        margin-top: 30px;
        padding: 10px;

        .item {
            margin: 20px 0;
            float: left;
            width: 40%;
            margin-right: 50px;
            box-shadow: -1px -1px 15px rgba(0, 0, 0, .1);
            background: linear-gradient(#f0f4fc, #ffffff);
            padding: 20px;
            display: flex;
            cursor: pointer;

            .img {
                img {
                    width: 150px;
                    height: 200px;
                }
            }

            .desc {
                padding: 0 20px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                h3 {
                    font-size: 20px;
                }

                p {
                    font-size: 16px;
                }

                .btns {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
}
</style>
